const LIMIT = 60
let prev = 0

/**
 * Class Lock
 * @class
 * @classdesc 手势解锁组件逻辑部分
 * @author pfan
 * 
 * @example
 *  new Lock(this,{
 *    canvasWidth: 300,   //canvas画布宽度 px
 *    canvasHeight: 300,  //canvas画布高度 px 
 *    canvasId: 'canvasLock', //canvas画布id
 *    drawColor: '#3985ff'  //绘制颜色
 *  })
 */
class Lock {

  /**
   * @constructs Lock构造函数
   * @param  {Object} pageContext page路由指针
   * @param  {Object} opts      组件所需参数
   * @param  {Number} opts.canvasWidth  canvas画布宽度 px
   * @param  {Number} opts.canvasHeight  canvas画布高度 px
   * @param  {String} opts.canvasId  canvas画布id
   * @param  {String} opts.drawColor    绘制颜色
   */  
  constructor (pageContext, opts) {
    this.page = pageContext
    this.canvasWidth = opts.canvasWidth || 300
    this.canvasHeight = opts.canvasHeight || 300
    this.canvasId = opts.id || 'canvasLock'
    this.chooseType = opts.chooseType || 3 //宫格 3x3
    this.drawColor = opts.drawColor || "#3985ff"

    this.init()

    this.page.updatePassword = this.updatePassword.bind(this)
    this.page.onTouchstart = this.onTouchstart.bind(this)
    this.page.onTouchmove = this.onTouchmove.bind(this)
    this.page.onTouchend = this.onTouchend.bind(this)
    this.page.onTouchcancel = this.onTouchcancel.bind(this)
  }

  init() {
      this.setData()   
      this.pswObj = {}

      this.lastPoint = []
      this.touchFlag = false
      this.ctx = wx.createCanvasContext(this.canvasId)
      this.createCircle()
  }

  createCircle() { // 计算各个点坐标，画圆，根据canvas的大小来平均分配半径
      let n = this.chooseType
      let count = 0
      let r = this.r = this.canvasWidth / (2 + 4 * n) // 计算cricle半径
      this.lastPoint = []
      this.arr = []  //记录9宫格位置
      this.restPoint = []
      for (let i = 0 ; i < n ; i++) {
          for (let j = 0 ; j < n ; j++) {
              count++;
              let obj = {
                  x: j * 4 * r + 3 * r,
                  y: i * 4 * r + 3 * r,
                  index: count
              };
              this.arr.push(obj)
              this.restPoint.push(obj)
          }
      }
      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)

      for (let i = 0 ; i < this.arr.length ; i++) {
          this.drawCle(this.arr[i].x, this.arr[i].y)
      }
      this.ctx.draw(true)
  }

  drawCle(x, y) { // 初始化解锁密码面板
      this.ctx.setStrokeStyle(this.drawColor)
      this.ctx.setLineWidth(2)
      this.ctx.beginPath();
      this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true)
      this.ctx.closePath()
      this.ctx.stroke()
  }

  onTouchstart (e) {
    let po = this.getPosition(e)
    for (let i = 0 ; i < this.arr.length ; i++) {
        if (Math.abs(po.x - this.arr[i].x) < this.r && Math.abs(po.y - this.arr[i].y) < this.r) {
            this.touchFlag = true
            this.drawPoint(this.arr[i].x, this.arr[i].y)
            this.lastPoint.push(this.arr[i])
            this.restPoint.splice(i, 1)
            break;
        }
    }

    this.touchFlag && this.ctx.draw(true) 
  }

  onTouchmove (e) {
      let now = new Date()
      let duration = now - prev
      // 由于小程序canvas效率低下，帧频率大于60丢弃
      if (duration < Math.floor(1000 / LIMIT) ) return;
      prev = now

      if(this.touchFlag){
        this.update(this.getPosition(e))  
      } 
  }

  onTouchend (e) {
      if (this.touchFlag) {
          this.touchFlag = false
          this.storePass(this.lastPoint)

          //300ms 重置，重置时间会影响lastPoint取值， 影响drawline报错
          setTimeout(() => {
              this.reset()
          }, 300)
      }
  }

  onTouchcancel (e) {
    this.touchFlag = false
  }

  getPosition(e) { // 获取touch点相对于canvas的坐标
      return {
          x: e.touches[0].x,
          y: e.touches[0].y
      }
  }

  update(po) { // 核心变换方法在touchmove时候调用
      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
      for (let i = 0 ; i < this.arr.length ; i++) { // 每帧先把面板画出来
          this.drawCle(this.arr[i].x, this.arr[i].y)
      }

      this.drawPoint(this.lastPoint) // 每帧花轨迹
      this.drawLine(po , this.lastPoint) // 每帧画圆心

      for (let i = 0 ; i < this.restPoint.length ; i++) {
          let pt = this.restPoint[i]

          if (Math.abs(po.x - pt.x) < this.r && Math.abs(po.y - pt.y) < this.r) {
              this.drawPoint(pt.x, pt.y)
              this.pickPoints(this.lastPoint[this.lastPoint.length - 1], pt)
              break;
          }
      }
      this.ctx.draw(true)
  }

  drawPoint() { // 初始化圆心
      for (let i = 0 ; i < this.lastPoint.length ; i++) {
          this.ctx.setFillStyle(this.drawColor)  // 注意用set方法
          this.ctx.beginPath()
          this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r / 2, 0, Math.PI * 2, true)
          this.ctx.closePath()
          this.ctx.fill()
      }
  }

  drawLine(po, lastPoint) { // 解锁轨迹
      this.ctx.beginPath()
      this.ctx.lineWidth = 3
      this.ctx.moveTo(this.lastPoint[0].x, this.lastPoint[0].y)

      for (let i = 1 ; i < this.lastPoint.length ; i++) {
          this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y)
      }
      this.ctx.lineTo(po.x, po.y)
      this.ctx.stroke()
      this.ctx.closePath()
  }

  pickPoints(fromPt, toPt) {
      let lineLength = getDis(fromPt, toPt)
      let dir = toPt.index > fromPt.index ? 1 : -1

      let len = this.restPoint.length;
      let i = dir === 1 ? 0 : (len - 1)
      let limit = dir === 1 ? len : -1

      while (i !== limit) {
          let pt = this.restPoint[i]

          if ( getDis(pt, fromPt) + getDis(pt, toPt) === lineLength) {
              this.drawPoint(pt.x, pt.y)
              this.lastPoint.push(pt)
              this.restPoint.splice(i, 1)
              if (limit > 0) {
                  i--
                  limit--
              }
          }

          i += dir
      }
  }
  
  storePass(psw) {  // touchend结束之后对密码和状态的处理    
      let title, color
      if (this.pswObj.step == 1) {
          if (this.checkPass(this.pswObj.fpassword, psw)) {
              this.pswObj.step = 2
              this.pswObj.spassword = psw
              title = '密码保存成功'
              color = this.drawColor
              this.drawStatusPoint(this.drawColor)
          } else {
              title = '两次不一致，重新输入'
              color = 'red'
              this.drawStatusPoint('red')
              delete this.pswObj.step
          }
      } else if (this.pswObj.step == 2) {
          if (this.checkPass(this.pswObj.spassword, psw)) {
              title = '解锁成功'
              this.drawStatusPoint(this.drawColor)
          } else {
              title = '解锁失败'
              this.drawStatusPoint('red')
          }
      } else {
          this.pswObj.step = 1
          this.pswObj.fpassword = psw
          title = '再次输入'
      }

      this.setData(title, color)     
  }

  checkPass(psw1, psw2) { // 检测密码
      let p1 = ''
      let p2 = ''
      psw1.forEach( item => {
        p1 += item.index + item.index
      })
      psw2.forEach( item => {
        p2 += item.index + item.index
      })   
      return p1 === p2
  }

  drawStatusPoint(color) { // 初始化状态线条
      for (let i = 0 ; i < this.lastPoint.length ; i++) {
          this.ctx.setStrokeStyle(color)
          this.ctx.beginPath()
          this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r, 0, Math.PI * 2, true)
          this.ctx.closePath()
          this.ctx.stroke()
      }

      this.ctx.draw(true)
  }

  updatePassword() { 
      this.pswObj = {}
      this.setData()
      this.reset()
  }

  setData (title = "绘制解锁图案", color = "#888") {
    let {canvasWidth, canvasHeight} = this   
    this.page.setData({
      lockData: {
        title: title,
        color: color,
        canvasHeight: canvasHeight,
        canvasWidth: canvasWidth
      }
    })    
    if(title == "密码保存成功"){
      setTimeout( () => {
          this.page.setData({
            lockData: {
              title: "开始解锁",
              color: color,
              canvasHeight: canvasHeight,
              canvasWidth: canvasWidth
            }
          })  
      }, 1000)
    }   
  }

  reset() {
      this.createCircle()
  }

}


/**
 * getDis 获取两点直线距离
 * @param  {Object} a 坐标
 * @param  {Object} b 坐标
 * @return {Number}   距离值
 */
function getDis(a, b) {
    return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
}

export default Lock